import { useEffect, useState } from "react";
import { TreeSelect, ConfigProvider } from "antd";
import { getLevelProjectList, getLevel2ProjectList } from "@/api/public";
import selectArrowLight from "@/assets/theme/select-arrow-light.png";
import styles from "./index.module.scss";
import selectArrow from "@/assets/theme/select-arrow.png";
import { useSelector } from "react-redux";

export default function SelectProject(props) {
  const [options, setOptions] = useState([]);
  const theme = useSelector((state) => state.theme);
  useEffect(() => {
    getOption();
  }, []);

  function getOption() {
    getLevelProjectList({
      limit: 9999,
      page: 1,
    }).then((res) => {
      if (res?.code === 0) {
        setOptions(res.data.list);
      }
    });
  }

  function onChange(value, label, extra) {
    props.getSelectValue(value, label, extra);
  }

  const onLoadData = async (node) =>
    new Promise(async (resolve) => {
      if (node.isLeaf) return resolve(undefined);
      getLevel2ProjectList({
        op_l1pid: node.op_l1pid,
      }).then((res) => {
        if (res?.code === 0) {
          res.data.list.forEach((el) => {
            el.pId = el.op_l1pid;
            el.op_l1pid = el.op_l2pid;
            el.isLeaf = true;
          });
          setOptions(options.concat(res.data.list));
          resolve(undefined);
        }
      });
    });
  return (
    <ConfigProvider
      theme={{
        cssVar: true,
        components: {
          Select: {
            paddingSM: 55,
            colorTextPlaceholder: "#ffffff",
            colorText: "#ffffff",
            algorithm: false,
            primaryShadow: "0px 0px 12px rgba(0, 0, 0, 0)",
            hoverBorderColor: "transparent",
            activeBorderColor: "transparent",
            colorBorder: "transparent",
            colorBgElevated: "rgb(20, 31, 57)",
            optionSelectedBg: "rgb(143, 172, 215)",
            colorBgContainer: "transparent",
            controlOutlineWidth: "0",
          },
          TreeSelect: {
            colorText: "#ffffff",
            nodeSelectedBg: "#1677ff",
            colorBgElevated: "rgb(20, 31, 57)",
          },
        },
      }}
    >
      <div className={styles.selectBox}>
        <TreeSelect
          allowClear
          style={{
            width: "100%",
          }}
          suffixIcon={
            <img
              style={{ width: 14, height: 14 }}
              src={theme ? selectArrowLight : selectArrow}
              alt="加载中..."
            />
          }
          treeDataSimpleMode={{
            id: "op_l1pid",
            parentId: "pId",
          }}
          fieldNames={{
            label: "level1_project_name",
            value: "op_l1pid",
            children: "children",
            isLeaf: "isLeaf",
          }}
          dropdownStyle={{
            maxHeight: 400,
            overflow: "auto",
          }}
          placeholder="请选择项目"
          onChange={onChange}
          loadData={onLoadData}
          treeData={options}
        />
      </div>
    </ConfigProvider>
  );
}
